<div class="project-header">
    <button mat-raised-button color="primary" routerLink="/project/new"
      *appHasAccess="authorizePolicy.UserRoleBasicAccess">New Project</button>
</div>

<mat-card>
  <mat-card-header fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center">
    <mat-card-title>Archived Project</mat-card-title>
    <div class="action-buttons">
      <button mat-raised-button (click)="onExportClick()" *appHasAccess="authorizePolicy.ProjectOwnerAccess">Export</button>
      <button mat-raised-button color="primary" routerLink="/project/{{project.id}}/clone" *appHasAccess="authorizePolicy.ProjectOwnerAccess">Clone</button>
      <button mat-raised-button color="warn" (click)="onDeleteClick()" *appHasAccess="authorizePolicy.ProjectOwnerAccess">Delete</button>
    </div>
  </mat-card-header>
  <mat-card-content>
      <div fxLayout="row" fxLayout.xs="column" class="form-container">
          <div fxFlex="50" fxFlex.md="70">
              <mat-progress-bar mode='indeterminate' *ngIf='loading'></mat-progress-bar>
              <app-project-info-form (formReady)="formInitialized($event)" [disableForm]="true" [formSubmitAttempt]="formSubmitAttempt"></app-project-info-form>
              <div class="margin10"></div>
              <button mat-raised-button color="primary" (click)="onActivateClick()" [disabled]="loading" *appHasAccess="authorizePolicy.ProjectOwnerAccess">Activate</button>
          </div>
        </div>
  </mat-card-content>
</mat-card>
